<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字问人生 - 分析结果</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4A6FA5',
            secondary: '#6B8EAF',
            accent: '#E76F51',
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .fade-in {
        animation: fadeIn 0.8s ease-in;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .result-section {
        border-left: 3px solid #4A6FA5;
        padding-left: 1rem;
        margin-left: 0.5rem;
        margin-bottom: 2rem;
      }
      .highlight-box {
        background-color: #f8fafc;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
      }
      .highlight-text {
        color: #E76F51;
        font-weight: 600;
      }
      .character-display {
        font-size: 48px;
        font-weight: bold;
        color: #4A6FA5;
        text-align: center;
        margin: 1rem 0;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <div class="container mx-auto px-4 py-8 max-w-md flex-grow">
    <!-- 返回按钮 -->
    <div class="mb-8">
      <button id="back-button" class="text-primary hover:text-primary/80 transition-colors">
        <i class="fa fa-arrow-left mr-2"></i>返回
      </button>
    </div>

    <!-- 页面标题 -->
    <h1 class="text-2xl font-bold text-center text-primary mb-8 fade-in">字问人生</h1>

    <!-- 用户信息卡片 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8 fade-in">
      <div class="flex items-center mb-4">
        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
          <i class="fa fa-user text-primary text-xl"></i>
        </div>
        <div>
          <p class="text-gray-700"><span class="font-medium">性别：</span><span id="user-gender">男</span></p>
          <p class="text-gray-700"><span class="font-medium">年龄：</span><span id="user-age">36</span>岁</p>
        </div>
      </div>
      
      <div class="mb-4">
        <p class="text-gray-700 mb-1"><span class="font-medium">分析主题：</span></p>
        <p id="user-question" class="text-gray-600">我什么时候能发财</p>
      </div>
      
      <div class="mb-4">
        <p class="text-gray-700 mb-1"><span class="font-medium">联想汉字：</span></p>
        <div class="character-display" id="user-character">欢</div>
      </div>
      
      <p class="text-gray-500 text-sm"><span class="font-medium">分析时间：</span><span id="analysis-time">2024.08.09 12:32</span></p>
    </div>

    <!-- 分析结果标题 -->
    <h2 class="text-xl font-bold text-accent mb-4 fade-in">分析结果：</h2>

    <!-- 分析结果内容 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-12 fade-in">
      <!-- 潜意识的低语 -->
      <div class="result-section">
        <h3 class="text-lg font-bold text-primary mb-4">潜意识的低语：你真正在问的是什么？</h3>
        <div class="space-y-4 text-gray-700 leading-relaxed">
          <p>表层问题：<span class="highlight-text">"我什么时候能发财？"</span></p>
          <p>真实问题：<span class="highlight-text">"我何时能获得生命的自由与喜悦？"</span></p>
        </div>
      </div>

      <!-- 汉字解析 -->
      <div class="result-section">
        <p class="text-gray-700 leading-relaxed mb-4">"<span id="character-display-text">欢</span>"字泄露了你的秘密——你不是在寻找冰冷的数字，而是在寻找不必为金钱焦虑的轻松状态，一种能够纵情生活的底气。</p>
      </div>

      <!-- 三重镜像 -->
      <div class="result-section">
        <h3 class="text-lg font-bold text-primary mb-4">"欢"字的三重镜像：照见你与财富的关系</h3>
        
        <h4 class="font-medium text-primary mb-2">第一重镜像：拆解中的真相</h4>
        <div class="highlight-box space-y-3">
          <p><i class="fa fa-circle text-xs text-primary mr-2"></i><span class="font-medium">"又"+"欠"：</span>潜意识里，你认为财富是"又一次欠缺"。这种"总是差一点"的思维模式，可能正制造着你的财务现实</p>
          <p><i class="fa fa-circle text-xs text-primary mr-2"></i><span class="font-medium">"权"的变体：</span>去掉"欠"上的两点，"欢"极似"权"。你内心深处或许相信，财富需要某种权力或控制力才能获得</p>
          <p><i class="fa fa-circle text-xs text-primary mr-2"></i><span class="font-medium">"吹"的变形：</span>"又"+"口"，暗示你可能对财富有不切实际的幻想，或者过度依赖语言表达去吸引财富</p>
        </div>

        <h4 class="font-medium text-primary mt-6 mb-2">第二重镜像：情感与财富的联结</h4>
        <p class="text-gray-700 leading-relaxed">"欢"字在情感层面揭示，你将财富与快乐紧密绑定。当你能够在当下就体验到满足与喜悦，不再将幸福推迟到"发财后"，财富的能量才会真正流向你。</p>

        <h4 class="font-medium text-primary mt-6 mb-2">第三重镜像：行动的指引</h4>
        <p class="text-gray-700 leading-relaxed">
          1. <span class="font-medium">感恩练习：</span>每天记录3件让你感到满足的小事，培养富足心态<br>
          2. <span class="font-medium">价值反思：</span>列出你的核心价值观，确保你的赚钱方式与这些价值观保持一致<br>
          3. <span class="font-medium">当下喜悦：</span>安排能立即带来快乐但不需要大量金钱的活动，打破"有钱才快乐"的思维定式
        </p>
      </div>

      <!-- 最终启示 -->
      <div class="result-section">
        <h3 class="text-lg font-bold text-primary mb-4">最终启示</h3>
        <p class="text-gray-700 leading-relaxed">
          财富不是目的，而是工具。你真正追求的"欢"，无法通过外在的物质积累完全实现。当你学会在每个当下找到喜悦，财富自然会以你需要的方式出现。
        </p>
        <div class="highlight-box mt-4">
          <p class="text-primary font-medium text-center">"找到内心的欢喜，财富将成为不期而遇的礼物。"</p>
        </div>
      </div>
    </div>

    <!-- 互动区域 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
      <div class="flex items-center mb-4">
        <i class="fa fa-comment text-primary mr-3"></i>
        <h3 class="text-lg font-bold text-primary">继续向汉字心智AI分析系统提问</h3>
      </div>
      <div class="flex">
        <input type="text" class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的问题...">
        <button class="bg-primary text-white px-4 rounded-r-lg hover:bg-primary/90 transition-colors">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>

    <!-- 分享按钮 -->
    <div class="flex justify-center space-x-6 mb-8">
      <button class="flex flex-col items-center text-gray-600 hover:text-primary transition-all">
        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 hover:share-btn-hover">
          <i class="fa fa-weixin text-xl"></i>
        </div>
        <span class="text-sm">微信</span>
      </button>
      <button class="flex flex-col items-center text-gray-600 hover:text-primary transition-all">
        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 hover:share-btn-hover">
          <i class="fa fa-weibo text-xl"></i>
        </div>
        <span class="text-sm">微博</span>
      </button>
      <button class="flex flex-col items-center text-gray-600 hover:text-primary transition-all">
        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 hover:share-btn-hover">
          <i class="fa fa-download text-xl"></i>
        </div>
        <span class="text-sm">保存</span>
      </button>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="py-6 text-center text-gray-500 text-sm">
    <p>© 2024 汉字心智测评 | 仅供参考，非专业心理诊断</p>
  </footer>

  <!-- JavaScript -->
  <script>
    // 元素选择器
    const backButton = document.getElementById('back-button');
    const userGender = document.getElementById('user-gender');
    const userAge = document.getElementById('user-age');
    const userQuestion = document.getElementById('user-question');
    const userCharacter = document.getElementById('user-character');
    const characterDisplayText = document.getElementById('character-display-text');
    const analysisTime = document.getElementById('analysis-time');

    // 返回按钮点击事件
    backButton.addEventListener('click', function() {
      window.location.href = 'index.html';
    });

    // 页面加载时获取并显示用户信息
    document.addEventListener('DOMContentLoaded', function() {
      // 从localStorage获取用户信息
      const gender = localStorage.getItem('wordQuestionGender');
      const age = localStorage.getItem('wordQuestionAge');
      const question = localStorage.getItem('userQuestion');
      const character = localStorage.getItem('userCharacter');
      
      // 如果有存储的信息，更新页面显示
      if (gender) {
        userGender.textContent = gender;
      }
      if (age) {
        userAge.textContent = age;
      }
      if (question) {
        userQuestion.textContent = question;
      }
      if (character) {
        userCharacter.textContent = character;
        characterDisplayText.textContent = character;
      }
      
      // 设置当前时间为分析时间
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const formattedTime = `${year}.${month}.${day} ${hours}:${minutes}`;
      analysisTime.textContent = formattedTime;
      
      // 为元素添加淡入动画延迟
      const fadeElements = document.querySelectorAll('.fade-in');
      fadeElements.forEach((element, index) => {
        element.style.animationDelay = `${index * 0.1}s`;
      });
    });

    // 分享按钮功能（模拟）
    document.querySelectorAll('.w-12.h-12.bg-blue-100').forEach(button => {
      button.addEventListener('click', function() {
        const platform = this.nextElementSibling.textContent;
        alert(`分享到${platform}功能已触发！`);
      });
    });
  </script>
</body>
</html>